<template>
	<view class="course-details-container">
		<u-image width="100%" height="360rpx" model="aspectFit" :src="list1.F_Img"></u-image>
		<view class="course-box">
			<view class="tabs-box">
				<u-tabs :list="courseTabs" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
			<view class="tab-content">
				<view class="content-item" v-show="!this.current">
				<view class="video-item" v-for="(videoItem,index) in jindusign" :key="index">
					<view class="left">
						<h1 class="u-line-1">{{videoItem.fullName}}</h1>
						<text>课程时长：{{videoItem.vtime}}</text>
						<view class="learn_progress">
							<p>学习进度</p>
							<u-line-progress class="progress-box" :percent="videoItem.sign" active-color="#1776CE">
							</u-line-progress>
				
						</view>
					</view>
					<u-icon class="right-icon" name="play-circle-fill" color="#1776CE" size="88"
						@click="play(index)">
				
					</u-icon>
				
				</view>
				</view>
				<view class="content-item" v-show="this.current">
					<view class="teacher">
						<p class="title">讲师姓名</p>
						<p class="name">{{list1.F_Teachname}}</p>
					</view>
					<view class="parse">
					
						<view class="btext">
							{{list1.F_Teach}}
						</view>
					
					</view>
					
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import resources from '@/libs/resources.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getDictionaryDataSelector,
		getDataInterfaceRes
	} from '@/api/common'
	import request from '@/utils/request'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				vurl: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
				videoList: [],
				content: `
					<p>[ 1 ]国家基金委青年基金项目“利用生物标志物ladderane研究长江口外低氧区的时空分
					布规律和形成机制” （41106038）,项目负责人2012-2014 [1] [ 2 ]科技部973项目“
					我国陆架海生态环境演变过程、机制及未来变化趋势预测”，学术骨干2010-2014 [ 3 ]国
					家基金委重大国际(地区)合作研究项目“人类活动和气候变化对我国边缘海有机碳汇影响的有
					机分子记录”，学术骨干2010-2013 [1] [ 4 ]国家财政油气专项“青藏高原油气资源战略选
					区调查与评价项目”，参与研究2004-2008 [ 5 ]中石化海相前瞻研究项目“青藏特提斯活动古</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`,
				parseStyle: {
					p: 'color:#40464A;fontsize:30rpx;line-height:1.5;text-align:justify;',
					span: 'color:#666;fontsize:30rpx;',
					img: 'width:100% !important;margin:20rpx 0'
				},
				courseTabs: [{
					name: '目录'
				}, {
					name: '课程简介'
				}],
				current: 0,
				sortValue: '',
				searchForm: {
					coursename: undefined,
					courseteachername: undefined,
					introduction: undefined,
					creatortime: undefined,
				},
				downOption: {
					use: true,
					auto: false
				},
				upOption: {
					page: {
						num: 0,
						size: 20,
						time: null,
					},
					empty: {
						use: true,
						icon: resources.message.nodata,
						tip: "暂无数据",
						fixed: true,
						top: "300rpx",
						zIndex: 5,
					},
					textNoMore: '没有更多数据',
					toTop: {
						bottom: 250
					}
				},
				list: [],
				listQuery: {
					sort: 'desc',
					sidx: '',
					keyword: '',
					json: ''
				},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}, ],
				sortOptions: [{
						label: '课程名称降序',
						sidx: 'coursename',
						value: 'coursenamedesc',
						sort: 'desc'
					},
					{
						label: '课程名称升序',
						sidx: 'coursename',
						value: 'coursenameasc',
						sort: 'asc'
					},
					{
						label: '讲师姓名降序',
						sidx: 'courseteachername',
						value: 'courseteachernamedesc',
						sort: 'desc'
					},
					{
						label: '讲师姓名升序',
						sidx: 'courseteachername',
						value: 'courseteachernameasc',
						sort: 'asc'
					},
					{
						label: '课程简介降序',
						sidx: 'introduction',
						value: 'introductiondesc',
						sort: 'desc'
					},
					{
						label: '课程简介升序',
						sidx: 'introduction',
						value: 'introductionasc',
						sort: 'asc'
					},
					{
						label: '创建时间降序',
						sidx: 'creatortime',
						value: 'creatortimedesc',
						sort: 'desc'
					},
					{
						label: '创建时间升序',
						sidx: 'creatortime',
						value: 'creatortimeasc',
						sort: 'asc'
					},
				],
				menuId: '',
				sign: '',
				num: '',
				list1: [],
				listid: '',
				n: 18,
				jindusign: [],
				arrname: []
			}
		},
		onLoad(e) {
			this.listid = e.listid
			this.num = e.num
			this.sign = e.id
			this.menuId = e.menuId
			uni.$on('refresh', () => {
				this.list = [];
				this.mescroll.resetUpScroll();
			})
			this.dataAll()
			this.upCallback()
			this.getlist()
			this.getjindu()
		},
		onUnload() {
			uni.$off('refresh')
		},
		methods: {
			play(index) {
				let timer = new Date().getTime();

				let uid = JSON.parse(localStorage.getItem('userInfo')).data.userId
				let vid = this.videoList[index].id
				let cid = this.listid
				console.log(this.listid);
				let query = {
					UserId: uid,
					VIdeoDetailId: vid,
					Pace: 100,
					ClassId: cid,
					ID: timer,
				}

				this.n = this.n
				// console.log(this.n);
				request({
					url: '/api/system/DataInterface/353809803371349253/Actions/Response',
					method: 'POST',
					Headers: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					data: JSON.stringify(query),
				}).then((res) => {
					console.log(res);
				})
				console.log(JSON.stringify(this.videoList));
				uni.navigateTo({
					url: '/pages/apply/onlearn/videoplay/index?Value=' + encodeURIComponent(JSON.stringify(this.videoList[index].vurl)),
					fail: (err) => {
						this.$u.toast("暂无此页面111")
					}
				})
    
			},
			change(index) {
				this.current = index;
				console.log(this.current)
			},
			dataAll() {},
			closeData(e) {
				if (e == 1) {
					// this.reset()
				}
			},
			getlist() {
				request({
					url: '/api/system/DataInterface/353809803371349253/Actions/Response',
					method: 'get',
				}).then((res) => {


					for (let i = 0; i < res.data.data.length; i++) {

						if (res.data.data[i].classid == this.listid) {
							this.videoList.push(res.data.data[i])
						}

					}
					for (let a = 0; a <= this.videoList.length; a++) {
						this.videoList[a].vurl = 'http://1.192.217.27:20000' + JSON.parse(this.videoList[a].vurl)[
							0].url
					
					}

				}).catch(() => {

				})
			},
			upCallback(page) {
				request({
					url: '/api/system/DataInterface/353803533302105349/Actions/Response',
					method: 'get',
				}).then(res => {
		
					for (let i = 0; i < res.data.data.length; i++) {

						if (this.sign == 3) {
							if (res.data.data[i].F_Classtype == "353796849649321221") {
								this.list.push(res.data.data[i])
							}

							this.list1 = this.list[this.num]


						}
						if (this.sign == 2) {
							if (res.data.data[i].F_Classtype == "353796783433843973") {
								this.list.push(res.data.data[i])
							}

							this.list1 = this.list[this.num]


						}
						if (this.sign == 1) {
							if (res.data.data[i].F_Classtype == "353796675950609669") {
								this.list.push(res.data.data[i])
							}

							this.list1 = this.list[this.num]
							// console.log(this.list1.F_Img);
							// // this.list1.F_Img = 'http://1.192.217.27:30000' + JSON.parse(this.list1
							// // 	.F_Img)[0].url
							// console.log(this.list1);

						}

					}
					if (this.list1.length >= 1) {
						for (let a = 0; a <= this.list1.length; a++) {
							this.list1[a].F_Img = 'http://1.192.217.27:20000' + JSON.parse(this.list1[a].F_Img)[0]
								.url

						}
					} else {
						this.list1.F_Img = 'http://1.192.217.27:20000' + JSON.parse(this.list1.F_Img)[0].url

					}


				}).catch(() => {

				})
			},
			getjindu() {
				const query = {
					currentPage: this.upOption.page.num,
					pageSize: this.upOption.page.size,
					menuId: this.menuId,
					...this.listQuery,
					...this.searchForm
				}
				// this.getlist()
				request({
					url: '/api/example/Mt_safe_7learnjindu/getList',
					method: 'post',
					data: query,
				}).then(res => {
					for (let j = 0; j <= res.data.list.length; j++) {
						this.arrname.push(res.data.list[j].videodetailid)
					
					
					for (let i = 0; i <this.videoList.length; i++) {
						this.jindusign=this.videoList
					
						if(this.arrname.indexOf(this.videoList[i].fullName)!=-1){
							this.jindusign[i].sign=100
						
						}else{
							this.jindusign[i].sign=20
						}	
					}}
				}).catch(() => {

				})
			},
			handleClick(index, index1) {
				const item = this.list[index]
				request({
					url: '/api/example/Mt_safe_course/' + item.id,
					method: 'delete'
				}).then(res => {
					uni.showToast({
						title: res.msg,
						complete: () => {
							this.$u.toast(res.msg)
							this.list.splice(index, 1)
							if (!this.list.length) this.mescroll.showEmpty()
						}
					})
				})
			},
			open(index) {
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},
			search() {
				if (this.isPreview == '1') return
				this.searchTimer && clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				}, 300)
			},
			goDetail(id, status) {
				let btnType = ''
				let btnList = []
				btnList.push('btn_edit')
				btnList.push('btn_detail')
				if (btnList.includes('btn_detail')) {
					btnType = "btn_detail"
				}
				if (btnList.includes('btn_edit')) {
					btnType = "btn_edit"
				}
				if (!btnType) return
				this.jumPage(id, status, btnType)
			},
			addPage() {
				this.jumPage()
			},
			jumPage(id, status, btnType) {
				if (!id && !status) btnType = 'btn_add'
				uni.navigateTo({
					url: id ? './form?menuId=' + this.menuId + '&jurisdictionType=' + btnType +
						'&id=' + id : './form?menuId=' + this.menuId + '&jurisdictionType=' + btnType
				})
			},
			cellClick(item) {
				if (this.sortValue === item.value) return
				this.listQuery.sort = item.sort
				this.listQuery.sidx = item.sidx
				this.sortValue = item.value
				this.$refs.uDropdown.close();
				this.$nextTick(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				})
			},
			reset() {
				this.$refs.searchForm.resetFields()
			},
			closeDropdown() {
				this.$refs.uDropdown.close();
				this.$nextTick(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				})
			},
			dataList(data) {
				let _list = []
				for (let i = 0; i < data.list.length; i++) {
					let _data = data.list[i]
					_list.push(_data)
				}
				return _list;
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
		height: 100%;
		/* #ifdef MP-ALIPAY */
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;

		/* #endif */
		.course-details-container {
			.course-box {
				width: calc(100% - 28rpx);
				margin: 15rpx auto 0 auto;
				background-color: #fff;
				border-radius: 16rpx;
				min-height: calc(100vh - 600rpx);
				padding: 7rpx 20rpx 20rpx 20rpx;

				.tabs-box {
					width: 100%;
				}

				.tab-content {
					padding: 20rpx 0 0rpx 0;

					.content-item {
						.teacher {
							display: flex;
							align-items: center;
							margin-top: 25rpx;
							margin-bottom: 30rpx;

							.title {
								font-size: 30rpx;
								font-weight: bold;
								color: #333;
								margin-left: 10rpx;
							}

							.name {
								color: #666;
								margin-left: 20rpx;
							}
						}

						.parse {
							padding: 30rpx;
							background-color: #F2F4F5;
							border-radius: 16rpx;
						}

						.video-item {
							width: 100%;
							padding: 30rpx;
							margin: 16rpx 0;
							border-radius: 16rpx;
							background-color: #F2F4F5;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.left {
								width: 100%;

								h1 {
									font-size: 30rpx;
									color: #000;
								}

								text {
									display: flex;
									margin: 10rpx 0;
								}

								.learn_progress {
									width: 90%;
									display: flex;
									align-items: center;

									.progress-box {
										margin: 0 10rpx;
									}

									p {
										flex-shrink: 0;
									}
								}
							}

							.right-icon {
								flex-shrink: 0;
							}
						}
					}
				}
			}
		}
	}
</style>
